<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span class="title">商品购买</span>
              <span class="subtitle">请选择您需要购买的商品和数量</span>
            </div>
          </template>

          <div class="quota-container">
            <el-row :gutter="20">
              <el-col v-for="pkg in packages" :key="pkg.id" :xs="24" :sm="12" :md="8">
                <div class="quota-item">
                  <div class="quota-header">
                    <h3>{{ pkg.packageName }}</h3>
                    <div class="price" v-if="!pkg.customPriceDiscount">¥{{ pkg.price }}/个</div>
                    <div class="price" v-else>
                      <span class="original-price">¥{{ pkg.price }}</span>
                      <span class="discount-price">¥{{ (pkg.price * pkg.customPriceDiscount.discount / 100).toFixed(2) }}</span>
                      <span class="discount-tag">{{ pkg.customPriceDiscount.discount }}折</span>
                    </div>
                  </div>
                  <div class="quota-content">
                    <div class="quota-image package-icon">
                      <template v-if="pkg.picUrl">
                        <img :src="pkg.picUrl" alt="商品图片" style="width: 100px; height: 100px; object-fit: cover; border-radius: 4px;" />
                      </template>
                      <template v-else>
                        <el-icon>
                          <Present />
                        </el-icon>
                      </template>
                    </div>
                    <div class="quota-desc">
                      <p>适用于最多 {{ pkg.personCount }} 人的家族成员登记</p>
                      <p>每个商品可登记对应数量的家族成员</p>
                    </div>
                    <div class="quota-action">
                      <div class="amount-control">
                        <span class="label">购买数量：</span>
                        <el-input-number
                          v-model="pkg.amount"
                          :min="0"
                          :precision="0"
                          size="large"
                        />
                      </div>
                      <div class="subtotal">
                        小计：<span class="price">¥{{ (pkg.amount * (pkg.customPriceDiscount ? (pkg.price * pkg.customPriceDiscount.discount / 100) : pkg.price || 0)).toFixed(2) }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>

          <!-- 结算区域 -->
          <div class="checkout-area">
            <div class="total-amount">
              <span class="label">总计：</span>
              <span class="total-price">¥{{ totalPrice.toFixed(2) }}</span>
            </div>
            <div class="checkout-button">
              <el-button
                type="primary"
                size="large"
                :disabled="totalPrice <= 0"
                @click="handleCheckout"
              >
                立即购买
              </el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 确认订单对话框 -->
    <el-dialog v-model="confirmDialogVisible" title="确认订单" width="500px">
      <div class="order-confirm">
        <div class="order-item" v-for="pkg in packages" :key="pkg.id">
          <span class="item-name">{{ pkg.packageName }}</span>
          <span class="item-detail" v-if="!pkg.customPriceDiscount">{{ pkg.amount }}个 × ¥{{ pkg.price }}</span>
          <span class="item-detail" v-else>{{ pkg.amount }}个 × ¥{{ (pkg.price * pkg.customPriceDiscount.discount / 100).toFixed(2) }} <small class="discount-note">({{ pkg.customPriceDiscount.discount }}折)</small></span>
          <span class="item-price">¥{{ (pkg.amount * (pkg.customPriceDiscount ? (pkg.price * pkg.customPriceDiscount.discount / 100) : pkg.price || 0)).toFixed(2) }}</span>
        </div>
        <div class="order-total">
          <span class="total-label">订单总额：</span>
          <span class="total-value">¥{{ totalPrice.toFixed(2) }}</span>
        </div>
        <div class="payment-method">
          <p class="method-title">选择支付方式：</p>
          <el-radio-group v-model="paymentMethod">
            <el-radio :value="'wallet'">钱包支付</el-radio>
            <!-- <el-radio :value="'wechat'">微信支付</el-radio>
            <el-radio :value="'alipay'">支付宝</el-radio> -->
            <el-radio :value="'offline'">线下支付</el-radio>
          </el-radio-group>
        </div>
      </div>
      <template #footer>
        <el-button @click="confirmDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmPurchase">确认支付</el-button>
      </template>
    </el-dialog>

    <!-- 支付结果对话框 -->
    <el-dialog v-model="resultDialogVisible" :title="paymentSuccess ? '支付成功' : '支付失败'" width="400px">
      <div class="payment-result" :class="{ 'success': paymentSuccess, 'failed': !paymentSuccess }">
        <el-icon :size="48" :color="paymentSuccess ? '#67c23a' : '#f56c6c'">
          <component :is="paymentSuccess ? 'CircleCheckFilled' : 'CircleCloseFilled'" />
        </el-icon>
        <p>{{ paymentSuccess ? resultMessage : errorMessage }}</p>
        <div v-if="paymentSuccess" class="success-info">
          <div v-for="item in purchasedItems" :key="item.id">
            <p>商品：{{ item.packageName }}，数量：{{ item.amount }}个</p>
          </div>
          <p>订单编号：{{ orderNumber }}</p>
        </div>
      </div>
      <template #footer>
        <el-button @click="resultDialogVisible = false">关闭</el-button>
        <el-button v-if="!paymentSuccess" type="primary" @click="handleRetry">重试</el-button>
      </template>
    </el-dialog>

    <!-- 线下支付对话框 -->
    <el-dialog 
      v-model="offlinePaymentVisible" 
      title="线下支付" 
      width="550px"
      @closed="qrcodeUrl = ''"
    >
      <div class="offline-payment">
        <el-steps :active="paymentStep" finish-status="success" simple class="payment-steps">
          <el-step title="扫码支付" icon="Money" />
          <el-step title="上传凭证" icon="Upload" />
          <el-step title="完成支付" icon="CircleCheck" />
        </el-steps>

        <div class="payment-content">
          <!-- 步骤1: 扫码支付 -->
          <div v-if="paymentStep === 0" class="payment-step-content">
            <div class="qrcode-container">
              <div v-if="loading" class="loading-qrcode">
                <el-skeleton style="width: 200px; height: 200px;" animated />
                <p class="loading-text">正在加载支付二维码...</p>
              </div>
              <div v-else-if="qrcodeData" class="qrcode-content">
                <div class="qrcode-header">
                  <span class="qrcode-title">请选择支付方式并扫描二维码</span>
                </div>
                <div class="payment-methods">
                  <el-radio-group v-model="offlinePaymentMethod" @change="handlePaymentMethodChange">
                    <el-radio label="wx">微信支付</el-radio>
                    <el-radio label="alipay">支付宝支付</el-radio>
                  </el-radio-group>
                </div>
                <div class="qrcode-wrapper">
                  <img :src="currentQrcodeUrl" alt="支付二维码" class="payment-qrcode" />
                </div>
                <div class="qrcode-info">
                  <div class="qrcode-amount">
                    <span class="amount-label">支付金额：</span>
                    <span class="price">¥{{ totalPrice.toFixed(2) }}</span>
                  </div>
                  <div class="qrcode-tips">
                    <p>1. 请使用{{ offlinePaymentMethod === 'wx' ? '微信' : '支付宝' }}扫描上方二维码</p>
                    <p>2. 完成支付后请保存付款凭证</p>
                    <p>3. 点击"下一步"上传支付凭证</p>
                  </div>
                </div>
              </div>
              <div v-else class="qrcode-error">
                <el-empty description="二维码加载失败" />
                <el-button type="primary" size="small" @click="getPaymentQrCode">重新加载</el-button>
              </div>
            </div>
          </div>

          <!-- 步骤2: 上传凭证 -->
          <div v-else-if="paymentStep === 1" class="payment-step-content">
            <div class="upload-container">
              <div class="upload-header">
                <div class="upload-title">上传支付凭证</div>
                <div class="upload-subtitle">请上传您的支付截图作为付款凭证</div>
              </div>
              
              <SingleImageUpload
                v-model="voucherUrl"
                :max-file-size="5"
                :style="{ width: '300px', height: '300px' }"
              />
            </div>
          </div>

          <!-- 步骤3: 确认提交 -->
          <div v-else-if="paymentStep === 2" class="payment-step-content">
            <div class="confirm-container">
              <div class="confirm-header">
                <el-icon class="confirm-icon"><CircleCheckFilled /></el-icon>
                <span class="confirm-title">确认提交</span>
              </div>
              
              <div class="confirm-content">
                <p class="confirm-text">您已完成支付并上传凭证，请确认以下信息：</p>
                
                <div class="confirm-info">
                  <div class="confirm-item">
                    <span class="item-label">订单编号：</span>
                    <span class="item-value">{{ orderNumber }}</span>
                  </div>
                  <div class="confirm-item">
                    <span class="item-label">支付金额：</span>
                    <span class="item-value price">¥{{ totalPrice.toFixed(2) }}</span>
                  </div>
                  <div class="confirm-item">
                    <span class="item-label">支付方式：</span>
                    <span class="item-value">线下支付</span>
                  </div>
                  <div class="confirm-item">
                    <span class="item-label">凭证状态：</span>
                    <span class="item-value">
                      <el-tag type="success" v-if="voucherUrl">已上传</el-tag>
                      <el-tag type="danger" v-else>未上传</el-tag>
                    </span>
                  </div>
                </div>
                
                <p class="confirm-note">点击"确认提交"后，系统将记录您的支付信息并等待管理员审核。</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <div class="left-buttons">
            <el-button @click="offlinePaymentVisible = false">取消</el-button>
          </div>
          <div class="right-buttons">
            <el-button v-if="paymentStep > 0" @click="paymentStep--">上一步</el-button>
            <el-button 
              v-if="paymentStep < 2" 
              type="primary" 
              @click="nextStep"
              :disabled="(paymentStep === 0 && !currentQrcodeUrl) || (paymentStep === 1 && !voucherUrl)"
            >
              下一步
            </el-button>
            <el-button 
              v-else 
              type="success" 
              @click="submitOfflinePayment"
              :disabled="!voucherUrl"
            >
              确认提交
            </el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import RechargeAPI from "@/api/genealogy/recharge.api";
import PackageAPI from "@/api/genealogy/package.api";
import { ref, computed, onMounted, nextTick, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { Present, CircleCheckFilled, CircleCloseFilled, UploadFilled, Money, Upload, CircleCheck } from '@element-plus/icons-vue'
import SingleImageUpload from "@/components/Upload/SingleImageUpload.vue";

const loading = ref(false);
const packages = ref<any[]>([]);
const confirmDialogVisible = ref(false);
const resultDialogVisible = ref(false);
const paymentSuccess = ref(false);
const orderNumber = ref('');
const paymentMethod = ref('wallet');
const resultMessage = ref('您的订单已支付成功！');
const errorMessage = ref('支付失败，请重试或联系客服。');
const purchasedItems = ref<any[]>([]);
const offlinePaymentVisible = ref(false);
const voucherUrl = ref('');
const fileList = ref<any[]>([]);
const qrcodeUrl = ref(''); // 统一支付二维码URL（旧）
const qrcodeData = ref<any>(null); // 支付二维码数据
const offlinePaymentMethod = ref('wx'); // 默认微信支付
const currentQrcodeUrl = ref(''); // 当前显示的二维码URL
const rechargeForm = reactive({
  level: null,
  leadUserId: null
});
const paymentStep = ref(0); // 支付步骤：0-扫码支付，1-上传凭证，2-确认提交

// 获取商品列表
function getPackageList() {
  loading.value = true;
  PackageAPI.getPage({ pageNum: 1, pageSize: 100 })
    .then((data: any) => {
      packages.value = (data?.list || []).map((item: any) => ({
        ...item,
        amount: 0
      }));
    })
    .finally(() => {
      loading.value = false;
    });
}

// 计算总价
const totalPrice = computed(() => {
  return packages.value.reduce((sum, pkg) => {
    const price = pkg.customPriceDiscount 
      ? pkg.price * pkg.customPriceDiscount.discount / 100 
      : pkg.price || 0;
    return sum + (pkg.amount * price);
  }, 0);
});

// 结算
function handleCheckout() {
  if (totalPrice.value <= 0) {
    ElMessage.warning('请至少选择一个商品');
    return;
  }
  // 直接创建订单
  submitOrder();
}

// 创建订单，只负责下单，返回订单号
function submitOrder() {
  loading.value = true;
  const orderItems = packages.value
    .filter(pkg => pkg.amount > 0)
    .map(pkg => {
      const price = pkg.customPriceDiscount 
        ? pkg.price * pkg.customPriceDiscount.discount / 100 
        : pkg.price;
      return {
        packageId: pkg.id,
        totalItemAmount: pkg.amount,
        totalItemMoney: pkg.amount * price
      };
    });
  const orderData = {
    orderItems: orderItems,
    totalMoney: totalPrice.value
  };
  RechargeAPI.createUserOrder(orderData)
    .then((res: any) => {
      orderNumber.value = res;
      confirmDialogVisible.value = true;
    })
    .catch(() => {
      ElMessage.error('订单创建失败');
    })
    .finally(() => {
      loading.value = false;
    });
}

// 确认支付，调用ConfirmPurchase
function confirmPurchase() {
  if (!orderNumber.value) {
    ElMessage.error('订单号不存在');
    return;
  }

  // 如果选择线下支付，显示线下支付对话框
  if (paymentMethod.value === 'offline') {
    confirmDialogVisible.value = false;
    // 获取充值二维码
    getPaymentQrCode();
    offlinePaymentVisible.value = true;
    return;
  }

  loading.value = true;
  RechargeAPI.ConfirmPurchase({ 
    orderNo: orderNumber.value, 
    paymentMethod: paymentMethod.value 
  })
    .then((res: any) => {
      console.log('支付成功响应:', res);
      // 先设置状态
      paymentSuccess.value = true;
      resultMessage.value = res?.msg || '您的订单已支付成功！';
      
      // 保存已购买的商品信息
      purchasedItems.value = packages.value
        .filter(pkg => pkg.amount > 0)
        .map(pkg => ({
          id: pkg.id,
          packageName: pkg.packageName,
          amount: pkg.amount
        }));
      
      // 关闭确认对话框并显示结果对话框
      confirmDialogVisible.value = false;
      resultDialogVisible.value = true;
      
      // 延迟重置购物车
      setTimeout(() => {
        resetCart();
      }, 1000);
    })
    .catch((error) => {
      console.log('支付失败:', error);
      // 先设置状态
      paymentSuccess.value = false;
      errorMessage.value = error?.response?.data?.msg || '支付失败，请重试或联系客服。';
      
      // 关闭确认对话框并显示结果对话框
      confirmDialogVisible.value = false;
      resultDialogVisible.value = true;
    })
    .finally(() => {
      loading.value = false;
    });
}

// 重试支付
function handleRetry() {
  resultDialogVisible.value = false;
  confirmDialogVisible.value = true;
}

// 重置购物车
function resetCart() {
  packages.value.forEach(pkg => pkg.amount = 0);
}

// 获取支付二维码
function getPaymentQrCode() {
  loading.value = true;
  RechargeAPI.getHighLeader(orderNumber.value)
    .then(res => {
      if (res) {
        qrcodeData.value = res;
        // 保存level和leadUserId参数
        rechargeForm.level = res.level;
        rechargeForm.leadUserId = res.leadUserId;
        // 设置默认微信支付
        offlinePaymentMethod.value = 'wx';
        handlePaymentMethodChange();
      } else {
        ElMessage.warning('获取支付二维码失败');
      }
    })
    .catch(error => {
      console.error('获取支付二维码错误:', error);
      ElMessage.error('获取支付二维码失败，请重试');
    })
    .finally(() => {
      loading.value = false;
    });
}

// 切换支付方式
function handlePaymentMethodChange() {
  if (!qrcodeData.value) return;
  
  if (offlinePaymentMethod.value === 'wx') {
    currentQrcodeUrl.value = qrcodeData.value.receiveMoneyPicWX;
  } else {
    currentQrcodeUrl.value = qrcodeData.value.receiveMoneyPicAliPay;
  }
}

// 下一步
function nextStep() {
  if (paymentStep.value < 2) {
    paymentStep.value++;
  }
}

// 提交线下支付凭证
function submitOfflinePayment() {
  if (!voucherUrl.value) {
    ElMessage.warning('请上传支付凭证');
    return;
  }

  loading.value = true;
  
  // 创建支付数据
  const paymentData = {
    orderNo: orderNumber.value,
    paymentMethod: 'offline',
    voucherUrl: voucherUrl.value,
    leadUserId: rechargeForm.leadUserId, // 添加leadUserId参数
    offPayChannel: offlinePaymentMethod.value == 'wx'?0:1 // 添加支付渠道
  };

  // 调用API提交支付信息
  RechargeAPI.ConfirmPurchase(paymentData)
    .then((res: any) => {
      console.log('线下支付提交成功:', res);
      paymentSuccess.value = true;
      resultMessage.value = '您的线下支付凭证已提交，等待管理员审核！';
      
      // 保存已购买的商品信息
      purchasedItems.value = packages.value
        .filter(pkg => pkg.amount > 0)
        .map(pkg => ({
          id: pkg.id,
          packageName: pkg.packageName,
          amount: pkg.amount
        }));
      
      // 关闭线下支付对话框并显示结果对话框
      offlinePaymentVisible.value = false;
      resultDialogVisible.value = true;
      
      // 重置支付步骤
      paymentStep.value = 0;
      
      // 延迟重置购物车
      setTimeout(() => {
        resetCart();
      }, 1000);
    })
    .catch((error) => {
      console.log('线下支付提交失败:', error);
      paymentSuccess.value = false;
      errorMessage.value = error?.response?.data?.msg || '支付凭证提交失败，请重试或联系客服。';
      
      // 关闭线下支付对话框并显示结果对话框
      offlinePaymentVisible.value = false;
      resultDialogVisible.value = true;
    })
    .finally(() => {
      loading.value = false;
      // 清空文件列表
      voucherUrl.value = '';
      fileList.value = [];
    });
}

// 监听voucherUrl变化，帮助调试
watch(voucherUrl, (newVal) => {
  console.log('voucherUrl变化:', newVal);
}, { immediate: true });

onMounted(() => {
  getPackageList();
});
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.card-header {
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.subtitle {
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
}

.quota-container {
  margin-top: 20px;
}

.quota-item {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.3s;
  height: 100%;
  margin-bottom: 20px;
}

.quota-item:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.quota-header {
  background-color: #f5f7fa;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quota-header h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.price {
  color: #f56c6c;
  font-size: 18px;
  font-weight: bold;
}

.quota-content {
  padding: 20px;
}

.quota-image {
  text-align: center;
  margin-bottom: 15px;
  width: 120px;
  height: 120px;
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.living-icon {
  background-color: #67c23a;
  color: white;
}

.deceased-icon {
  background-color: #909399;
  color: white;
}

.quota-image i {
  font-size: 48px;
}

.quota-desc {
  margin-bottom: 20px;
}

.quota-desc p {
  margin: 5px 0;
  color: #606266;
}

.quota-action {
  margin-top: 15px;
}

.amount-control {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.label {
  margin-right: 10px;
  color: #606266;
}

.subtotal {
  text-align: right;
  font-size: 16px;
  color: #303133;
}

.checkout-area {
  margin-top: 30px;
  border-top: 1px solid #ebeef5;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.total-amount {
  font-size: 18px;
}

.total-price {
  color: #f56c6c;
  font-size: 24px;
  font-weight: bold;
}

.order-confirm {
  padding: 10px 0;
}

.order-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #ebeef5;
}

.item-name {
  font-weight: bold;
  color: #303133;
}

.item-detail {
  color: #606266;
}

.item-price {
  color: #f56c6c;
}

.order-total {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  font-size: 18px;
}

.total-label {
  font-weight: bold;
}

.total-value {
  color: #f56c6c;
  font-weight: bold;
}

.payment-method {
  margin-top: 20px;
}

.method-title {
  margin-bottom: 10px;
  color: #303133;
}

.payment-result {
  text-align: center;
  padding: 20px 0;
}

.payment-result i {
  font-size: 48px;
  margin-bottom: 15px;
}

.success i {
  color: #67c23a;
}

.failed i {
  color: #f56c6c;
}

.success-info {
  margin-top: 15px;
  text-align: left;
  background-color: #f5f7fa;
  padding: 10px 15px;
  border-radius: 4px;
}

.success-info p {
  margin: 5px 0;
}

/* 线下支付样式 */
.offline-payment {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qrcode-container {
  text-align: center;
  margin-bottom: 20px;
}

.payment-qrcode {
  width: 200px;
  height: 200px;
  margin-bottom: 10px;
}

.qrcode-tip {
  color: #606266;
  margin: 5px 0;
}

.qrcode-amount {
  font-size: 16px;
  margin: 10px 0;
}

.upload-container {
  width: 100%;
  margin-top: 20px;
  padding: 15px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  background-color: #fafafa;
}

.upload-header {
  margin-bottom: 10px;
}

.upload-title {
  font-weight: bold;
  margin-bottom: 15px;
}

.upload-subtitle {
  color: #606266;
}

.el-upload__tip {
  color: #909399;
  margin-top: 10px;
}

.upload-success-icon {
  color: #67c23a;
  margin-right: 5px;
}

.upload-demo {
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .checkout-area {
    flex-direction: column;
  }
  
  .total-amount {
    margin-bottom: 15px;
  }
}

.package-icon {
  color: #409EFF;
}

.quota-item.selected {
  border: 2px solid #409EFF;
  box-shadow: 0 2px 12px 0 rgba(64,158,255,0.1);
}

.original-price {
  text-decoration: line-through;
  color: #909399;
  font-size: 14px;
  margin-right: 5px;
}

.discount-price {
  color: #f56c6c;
  font-size: 18px;
  font-weight: bold;
}

.discount-tag {
  background-color: #f56c6c;
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 5px;
}

.discount-note {
  color: #f56c6c;
  font-size: 12px;
}

.loading-qrcode {
  width: 200px;
  height: 200px;
  margin: 0 auto 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loading-text {
  text-align: center;
  margin-top: 10px;
  color: #909399;
  width: 100%;
}

.payment-methods {
  margin-bottom: 15px;
  text-align: center;
}

.qrcode-error {
  width: 200px;
  height: 200px;
  margin: 0 auto 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.qrcode-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
}

.payment-steps {
  margin-bottom: 20px;
  width: 100%;
}

.payment-content {
  padding: 20px;
}

.payment-step-content {
  margin-bottom: 20px;
}

.qrcode-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.qrcode-title {
  font-weight: bold;
}

.qrcode-wrapper {
  margin-bottom: 10px;
}

.qrcode-info {
  text-align: center;
}

.qrcode-amount {
  font-size: 16px;
  margin: 10px 0;
}

.qrcode-tips {
  color: #606266;
}

.upload-header {
  margin-bottom: 10px;
}

.upload-subtitle {
  color: #606266;
}

.upload-preview {
  margin-top: 10px;
  text-align: center;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.preview-title {
  font-weight: bold;
}

.preview-image {
  margin-bottom: 10px;
}

.confirm-container {
  text-align: center;
}

.confirm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.confirm-title {
  font-weight: bold;
}

.confirm-content {
  text-align: left;
}

.confirm-text {
  margin-bottom: 10px;
}

.confirm-info {
  margin-bottom: 10px;
}

.confirm-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.item-label {
  font-weight: bold;
}

.item-value {
  color: #606266;
}

.item-value.price {
  color: #f56c6c;
}

.confirm-note {
  color: #909399;
}

.dialog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left-buttons {
  display: flex;
  align-items: center;
}

.right-buttons {
  display: flex;
  align-items: center;
}
</style>
